<template>
<div class="register-box">
<div class="register">
    <div class="getWord-title">
     <p class="title-p">
         注册
     </p>
     <p class="title-line"></p>
    </div>
    <div class="getWord-form">
    <div class="form-box">
    <i-input element-id="userName" v-bind:maxlength="11" class="login-inp" v-model.number="userName" @on-change="removeErro('userName')" :class="{ 'ivu-form-item-error':userNameError }"  placeholder="输入注册手机号" ></i-input>
    <div class="form-inp">
     <i-input  element-id="inpCode" v-model="inpCode" class="input-set" @on-change="removeErro('inpCode')" :class="{ 'ivu-form-item-error':codeError }" placeholder="输入手机验证码"></i-input>
     <button class="setMess" :class="{ 'code': code.disabled}" :disabled="code.disabled" @click="Code">{{code.message}}</button>
    </div>
    <i-input element-id="passWord" class="login-inp" v-model.trim="passWord" type="password" @on-change="removeErro('passWord')" :class="{ 'ivu-form-item-error':passWordError }"  placeholder="初始密码为8-16位数字和英文字母组合"></i-input>
    <i-input element-id="passWords" class="login-inp" v-model.trim="passWords" type="password" @on-change="removeErro('passWords')" :class="{ 'ivu-form-item-error':passWordErrors }"  placeholder="确认初始密码"></i-input>
    <!--<div class="pictrue-inp">-->
     <!--<i-input  element-id="picCode" v-model="picCode" class="input-set" @on-change="removeErro('picCode')" :class="{ 'ivu-form-item-error':piccodeError }" placeholder="输入图片验证码"></i-input>-->
     <!--<div style="height:50px;display:inline-block;cursor:pointer;" @click="refreshCode">-->
        <!--<s-identify :identifyCode="identifyCode"></s-identify>-->
     <!--</div>-->
    <!--</div>-->
    <div class="form-check">
        <Checkbox v-model="single"><span class="check-span">已阅读并同意<a @click="regProtocol">《使用协议》</a>和<a @click="safety">《隐私协议》</a></span>
        </Checkbox>
   </div>
    <input value="注册" type="button" class="login-btn" @click="register">

    </div>
   </div>
</div>
</div>
</template>
<script>
// import placeholder from '../page/utils/placeholder'
export default {
  name: "register",
  data() {
    return {
      code: {
        disabled: false,
        message: "发送验证码"
      },
      userName: "",
      passWord: "",
      passWords: "",
      inpCode: "",
      picCode: "",
      userNameError: false,
      passWordError: false,
      passWordErrors: false,
      codeError: false,
      piccodeError: false,
      single: true,
      img64: "",
      identifyCodes: "1234567890",
      identifyCode: ""
    };
  },
  mounted() {
    // this.$nextTick(()=>{
    //   placeholder();
    // })
    this.identifyCode = "";
    this.makeCode(this.identifyCodes, 4);
  },
  methods: {
    // 生成一个随机数
    randomNum(min, max) {
      return Math.floor(Math.random() * (max - min) + min);
    },
    refreshCode() {
      this.identifyCode = "";
      this.makeCode(this.identifyCodes, 4);
    },
    makeCode(o, l) {
      for (let i = 0; i < l; i++) {
        this.identifyCode += this.identifyCodes[
          this.randomNum(0, this.identifyCodes.length)
        ];
      }
      console.log(this.identifyCode);
    },
    register: function() {
      let ths = this;
      ths.$Message.destroy();
      //  console.log(ths.passWord)
      //  console.log(ths.passWords)

      //判断是否点击复选框？？？
      //手机号验证
      if (!ths.userName) {
        ths.$Message.error("手机号码不能为空！");
        ths.userNameError = true;
        $("#userName").focus();
        return false;
      } else {
        // var reg = /^(0|86|17951)?(13[0-9]|15[012356789]|17[678]|18[0-9]|14[57])[0-9]{8}$/;
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (!reg.test(ths.userName)) {
          ths.$Message.error("请输入正确格式的手机号");
          ths.userNameError = true;
          $("#userName").focus();
          return false;
        }
      }
      //验证码验证
      if (!ths.inpCode) {
        ths.$Message.error("手机验证码不能为空！");
        ths.codeError = true;
        $("#inpCode").focus();
        return false;
      } else {
        var reg = /^[0-9]{6}$/;
        if (!reg.test(ths.inpCode)) {
          ths.$Message.error("手机验证码必须是6位数字");
          ths.codeError = true;
          $("#inpCode").focus();
          return false;
        }
      }
      //密码验证
      if (!ths.passWord) {
        ths.$Message.error("初始密码不能为空！");
        ths.passWordError = true;
        $("#passWord").focus();
        return false;
      } else {
        var reg = /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/;
        var length = ths.passWord.length;
        console.log(length);
        if (length <= 7 || length >= 17) {
          ths.$Message.error("初始密码设置8-16位，请重新输入");
          ths.passWordError = true;
          $("#passWord").focus();
          return false;
        } else {
          if (!reg.test(ths.passWord)) {
            ths.$Message.error("初始密码设置英文+数字组合，请重新输入");
            ths.passWordError = true;
            $("#passWord").focus();
            return false;
          }
        }
      }
      //确认密码验证
      if (!ths.passWords) {
        ths.$Message.error("确认密码不能为空！");
        ths.passWordErrors = true;
        $("#passWords").focus();
        return false;
      } else {
        if (ths.passWord !== ths.passWords) {
          ths.$Message.error("密码与初始密码不一致！");
          ths.passWordErrors = true;
          $("#passWords").focus();
          return false;
        }
      }
      //图形验证码
      if (!ths.picCode) {
        ths.$Message.error("图片验证码不能为空！");
        ths.piccodeError = true;
        $("#picCode").focus();
        return false;
      } else {
        if (ths.picCode.toString() !== ths.identifyCode) {
          ths.$Message.error("请输入正确图片验证码");
          ths.piccodeError = true;
          $("#picCode").focus();
          return false;
        }
      }
      if (!ths.single) {
        ths.$Message.error("请同意《使用协议》和《隐私协议》！");
        return false;
      }
      ths
        .post("/user/userRegistration", {
          phone: ths.userName,
          pwd: ths.passWord,
          phonecode: ths.inpCode,
          instype: "0"
        })
        .then(data => {
          if (data.responseCode === "100000") {
            ths.$cookie.set("phone", ths.userName);
            ths.$cookie.set("pwd", ths.passWord);
            ths.$router.push("/registerSuccess");
          }
        });
    },
    removeErro: function(name) {
      let ths = this;
      if (name == "userName") {
        ths.userNameError = false;
      }
      if (name == "inpCode") {
        ths.codeError = false;
      }
      if (name == "passWord") {
        ths.passWordError = false;
      }
      if (name == "passWords") {
        ths.passWordErrors = false;
      }
      if (name == "picCode") {
        ths.piccodeError = false;
      }
    },
    //发送验证码
    Code: function() {
      let ths = this;
      ths.$Message.destroy();
      if (!ths.userName) {
        ths.$Message.error("手机号码不能为空！");
        ths.userNameError = true;
        $("#userName").focus();
        return false;
      } else {
        var reg = 11 && /^((13|14|15|17|18)[0-9]{1}\d{8})$/;
        if (!reg.test(ths.userName)) {
          ths.$Message.error("请输入正确格式的手机号");
          ths.userNameError = true;
          $("#userName").focus();
          return false;
        }
      }
      ths
        .post("/external/registrationCode", { phone: ths.userName })
        .then(data => {
          if (data.responseCode === "100000") {
            ths.getCodes(ths.$refs.code);
          }
        });
    },
    getCodes(el) {
      this.code.disabled = true;

      let num = 60;
      let timer = setInterval(() => {
        if (num > 1) {
          num--;
          this.code.message = `请在${num}s后点击`;
        } else {
          clearInterval(timer);
          this.code.message = `发送验证码`;
          this.code.disabled = false;
        }
      }, 1000);
    },
    getCode() {
      let ths = this;
      ths.$Message.destroy();
      if (!ths.inpCode) {
        ths.$Message.error("验证码不能为空！");
        ths.codeError = true;
        $("#inpCode").focus();
        return false;
      } else {
        var reg = /^[0-9]*$/;
        if (!reg.test(ths.inpCode)) {
          ths.$Message.error("验证码必须是数字");
          ths.codeError = true;
          $("#inpCode").focus();
          return false;
        }
      }
    },
    regProtocol() {
      let ths = this;
      ths.$router.push({ name: "regProtocol" });
    },
    safety() {
      let ths = this;
      ths.$router.push({ name: "safety" });
    }
  }
};
</script>
<style lang="scss">
body,
html {
  font-size: 62.5%;
}
.register-box {
  width: 1190px;
  margin: 10px auto 0 auto;
  .getWord-form {
    padding: 36px auto 0px auto;
    border: 1px solid #eeeeee;
    margin-bottom: 24px;
    background: #ffffff;
  }
  .form-box {
    width: 318px;
    margin: 42px auto 50px auto;
    text-align: center;
  }
  .login-inp {
    margin-bottom: 28px;
  }
  .login-inp input {
    width: 318px;
    height: 38px;
    line-height: 14px;
    font-size: 1.4rem;
    color: #9a9a9a;
    padding-left: 8px;
    font-family: "Microsoft YaHei";
  }
  .getWord-form .input-set {
    //   width:414px;
    display: inline;
  }
  .getWord-form .input-set input {
    width: 180px;
    height: 38px;
    float: left;
    margin-right: 22px;
    font-size: 1.4rem;
    color:#9a9a9a;
  }
  .setMess {
    width: 114px;
    height: 38px;
    line-height: 38px;
    cursor: pointer;
    color: #3a3a3a;
    border: 1px solid #dddee1;
    background-color: #f6f6f6;
    border-radius: 4px;
    font-size: 1.4rem;
    outline: none;
  }
  .code {
    cursor: no-drop;
  }
  .form-check {
    margin-bottom: 38px;
  }
  .ivu-checkbox-wrapper {
    font-size: 1.4rem;
    color: #3a3a3a;
    font-family: "Microsoft YaHei";
    margin-right: 0;
  }
  .check-span {
    margin-left: 6px;
  }
  .check-span a {
    color: #6a6a6a;
  }
  .login-btn {
    background: #ee5054;
    color: #ffffff;
    font-size: 1.6rem;
    width: 318px;
    height: 38px;
    border-radius: 5px;
    -o-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -ms-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -moz-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    -webkit-box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    box-shadow: 0 5px 8px rgba(238, 80, 84, 0.25); //底部部阴影
    cursor: pointer;
  }
  .form-inp {
    margin-bottom: 28px;
  }
  .pictrue-inp {
    margin-bottom: 16px;
  }
  #s-canvas {
    width: 112px;
    cursor: pointer!important;
  }
}
</style>
